<?php 
  $response = sfContext::getInstance()->getResponse();
  $response->addJavascript(sfConfig::get('app_fusionchart_js_dir'). 'FusionCharts.js');

  $chartPath = sfConfig::get('app_fusionchart_chart_dir');
  $chartType = $chartPath.'FCF_Column3D.swf';
  use_helper('Report');
?>
<div>
    <h3><?php echo $chartCaption ?></h3>
    <div>
      Please select:
      <?php echo memberSelect($members, $day, $memid)?>
      <?php echo chartTypeSelect() ?>
      <input type="button" id="showChart" value="Show"  />
    </div>
    <div id="<?php echo $chartId ?>" align="center">Chart is not available.</div>
    <script type="text/javascript">
    
    function getItem(url) {
      /*
      $.ajax({
        type: "GET",
        dataType:"json",
        url: url,
        success: function(data) {
          alert(data);
        }
      });
      */
      $.getJSON(url, function(data){
        //alert(getTable(data));
        $("#items")[0].innerHTML = getTable(data);
      });
      
    }

    function getTable(json) {
      total = '<table class="item"><tr>';
      title = json['title'];
      for (i=0; i<title.length; i++) {
        total += '<th>' + title[i] + '</th>'; 
      }
      
      total += '</tr>';
      data = json['data'];

      for (i=0; i<data.length; i++) {
        total += '<tr>';
        for (j=0; j<title.length; j++) {
          total += '<td>' + data[i][j] + '</td>';
        }
        total += '</tr>';
      }
      total += '</table>';
      return total;
    }
    
    var myChart = new FusionCharts("<?php echo $chartType ?>", "<?php echo $chartId ?>", "<?php echo $chartWidth ?>", "<?php echo $chartHeight ?>");
    myChart.setDataURL(escape("<?php echo $chartUrl ?>"));
    myChart.render("<?php echo $chartId ?>");
    
    $(document).ready(function() {
      $('.memberChart').click(function() {
        swf   = myChart.getAttribute('swf');
        id    = myChart.getAttribute('id');
        width = myChart.getAttribute('width');
        height= myChart.getAttribute('height');
        myChart = new FusionCharts(swf, id, width, height);
        myChart.setDataURL("/report/getLoadDistribution"+escape(this.search));
        myChart.render(id);
        return false;
        
      });

      
      $('.chartType').click(function() {
        swf   = "<?php echo $chartPath ?>" + this.title;

        url   = myChart.getVariable('dataURL');
        id    = myChart.getAttribute('id');
        width = myChart.getAttribute('width');
        height= myChart.getAttribute('height');
        myChart = new FusionCharts(swf, id, width, height);
        myChart.setDataURL(url);
        myChart.render(id);
        return false;
      });
      
      $('#showChart').click(function() {
        chart = $('#chartType')[0].value;
        memid = $('#memberChart')[0].value;
        day   = "<?php echo $day ?>";
        if (memid == -1) {
          query = "?day="+day;
        } else {
          query = "?day="+day+"&memid="+memid;
        }
        
        swf   = "<?php echo $chartPath ?>" + chart;
        //prompt("/report/getLoadDistribution"+query, "/report/getLoadDistribution"+query);
        url   = "/report/getLoadDistribution"+escape(query);
        id    = myChart.getAttribute('id');
        width = myChart.getAttribute('width');
        height= myChart.getAttribute('height');
        myChart = new FusionCharts(swf, id, width, height);
        myChart.setDataURL(url);
        myChart.render(id);
      });
    });
    </script>
    <hr />
    <div id="items"></div>

</div>